<template>
	<div class="gachaBB">
		<div>
			<div class="high" v-on:click="gachaHigh" v-loading="highLoading">
				<h3>公主祈愿</h3>
				<p>{{ highRes.yiyan }}</p>
				<p>
					祈愿：{{ highRes.gachaNum }} 次
					金光：{{ highRes.godNum }} 次
					<button class="resetBtn" v-on:click.stop="resetHigh">重置</button>
				</p>
				<el-row>
					<el-col v-for="(item, index) in highRes.list" :key="index" :span="4">
						<el-image style="width: 40px; height: 40px" :src="item.imgsrc">
							<div slot="error" class="image-slot">
								<el-image style="width: 40px; height: 40px" :src="errorImg"></el-image>
								<!-- 暂时不能根据角色、材料名称找到对应图片 -->
								<!-- {{ highRes.title }} -->
							</div>
						</el-image>
					</el-col>
				</el-row>
			</div>
			<br />
			<div class="custom" v-on:click="gachaCustom" v-loading="customLoading">
				<h3>魔女祈愿</h3>
				<p>{{ customRes.yiyan }}</p>
				<p>
					祈愿：{{ customRes.gachaNum }} 次
					金光：{{ customRes.godNum }} 次
					<button class="resetBtn" v-on:click.stop="resetCustom">重置</button>
				</p>
				<el-row>
					<el-col v-for="(item, index) in customRes.list" :key="index" :span="4">
						<el-image style="width: 40px; height: 40px" :src="item.imgsrc">
							<div slot="error" class="image-slot">
								<el-image style="width: 40px; height: 40px" :src="errorImg"></el-image>
							</div>
						</el-image>
					</el-col>
				</el-row>
			</div>
			<br />
			<div class="special" v-on:click="gachaSpecial" v-loading="specialLoading">
				<h3>魔法少女祈愿</h3>
				<p>{{ specialRes.yiyan }}</p>
				<p>
					祈愿：{{ specialRes.gachaNum }} 次
					金光：{{ specialRes.godNum }} 次
					<button class="resetBtn" v-on:click.stop="resetSpecial">重置</button>
				</p>
				<el-row>
					<el-col v-for="(item, index) in specialRes.list" :key="index" :span="4">
						<el-image style="width: 40px; height: 40px" :src="item.imgsrc">
							<div slot="error" class="image-slot">
								<el-image style="width: 40px; height: 40px" :src="errorImg"></el-image>
							</div>
						</el-image>
					</el-col>
				</el-row>
			</div>
		</div>
		<div></div>

	</div>
</template>

<script>
	import {
		gaoshiApi
	} from '@/api/gaoshiApi';

	export default {
		name: 'GachaBB',
		props: {
			// msg: String
		},
		data() {
			return {
				highRes: {},
				customRes: {},
				specialRes: {},
				highLoading: false,
				customLoading: false,
				specialLoading: false,
				highyiyan: '',
				customyiyan: '',
				specialyiyan: '',
				errorImg: require("@/assets/error.png"),
			}
		},
		mounted() {
			this.resetHigh();
			this.resetCustom();
			this.resetSpecial();
		},
		methods: {
			async gachaHigh() {
				try {
					if (this.highLoading) {
						return;
					}
					this.highLoading = true;
					let result = await gaoshiApi.gachaHigh();
					this.highRes['gachaNum'] += 10;
					let data = result.data
					for (let j = 0, len = data.length; j < len; j++) {
						if (data[j]['isGod']) {
							this.highRes['godNum'] += 1;
						}
						let title = data[j]['title'].split("×")[0].split("[")[0];
						let result2 = await gaoshiApi.getEquipmentByTitle(title);
						let data2 = result2.data;
						data[j].imgsrc = data2.length > 0 ? gaoshiApi.getImgSrc(String(data2[0]['img'])) : "";
					}
					this.highRes['list'] = data;
					this.highLoading = false;
					/* 一言在连续调用时很容易死机，不应放入loading条件里 */
					let res = await gaoshiApi.getYiyan();
					data = res.data;
					this.highRes['yiyan'] = data["hitokoto"] + " ——《" + data["from"] + "》";
				} catch (e) {
					console.error(e);
				}
			},

			async gachaCustom() {
				try {
					if (this.customLoading) {
						return;
					}
					this.customLoading = true;
					let result = await gaoshiApi.gachaCustom();
					this.customRes['gachaNum'] += 10;
					let data = result.data
					for (let j = 0, len = data.length; j < len; j++) {
						if (data[j]['isGod']) {
							this.customRes['godNum'] += 1;
						}
						let title = data[j]['title'].split("×")[0].split("[")[0];
						let result2 = await gaoshiApi.getEquipmentByTitle(title);
						let data2 = result2.data;
						data[j].imgsrc = data2.length > 0 ? gaoshiApi.getImgSrc(String(data2[0]['img'])) : "";
					}
					this.customRes['list'] = data;
					this.customLoading = false;
					/* 一言在连续调用时很容易死机，不应放入loading条件里 */
					let res = await gaoshiApi.getYiyan();
					data = res.data;
					this.customRes['yiyan'] = data["hitokoto"] + " ——《" + data["from"] + "》";
				} catch (e) {
					console.error(e);
				}
			},

			async gachaSpecial() {
				try {
					if (this.specialLoading) {
						return;
					}
					this.specialLoading = true;
					let result = await gaoshiApi.gachaCustom();
					this.specialRes['gachaNum'] += 10;
					let data = result.data
					for (let j = 0, len = data.length; j < len; j++) {
						if (data[j]['isGod']) {
							this.specialRes['godNum'] += 1;
						}
						let title = data[j]['title'].split("×")[0].split("[")[0];
						let result2 = await gaoshiApi.getEquipmentByTitle(title);
						let data2 = result2.data;
						data[j].imgsrc = data2.length > 0 ? gaoshiApi.getImgSrc(String(data2[0]['img'])) : "";
					}
					this.specialRes['list'] = data;
					this.specialLoading = false;
					/* 一言在连续调用时很容易死机，不应放入loading条件里 */
					let res = await gaoshiApi.getYiyan();
					data = res.data;
					this.specialRes['yiyan'] = data["hitokoto"] + " ——《" + data["from"] + "》";
				} catch (e) {
					console.error(e);
				}
			},
			
			resetHigh() {
				this.highRes = {
					'gachaNum': 0,
					'godNum': 0
				};
				this.highLoading = false;
			},
			
			resetCustom() {
				this.customRes = {
					'gachaNum': 0,
					'godNum': 0
				};
				this.customLoading = false;
			},
			
			resetSpecial() {
				this.specialRes = {
					'gachaNum': 0,
					'godNum': 0
				};
				this.specialLoading = false;
			}
		},
	}
</script>

<!-- 
linear-gradient()不适配苹果，-webkit-linear-gradient()适配苹果，用法有所不同
（1）-webkit-linear-gradient() 是设置渐变的属性 
（2）bottom为从底部开始渐变，可以为top、left、right
（3）hsla(0,0%,59%,.15)是第一个开始渐变的颜色，white为最后一个颜色 
HSLA(H,S,L,A)
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
-->
<style scoped>
	.gachaBB {
		/* background-color: #000000; */
	}
	
	.resetBtn{
		border: none;
		color: #989898;
		background-color: transparent;
		/* opacity:1; */
	}
	
	.resetBtn:hover{
		color: red;
	}

	.high,
	.custom,
	.special {
		text-align: center;
		border-radius: 5px;
		/* 水平居中 */
		margin: 20px auto;
		padding: 20px;
		padding-top: 0px;
		width: 80%;
	}

	.high {
		background: -webkit-linear-gradient(bottom, #fbda41, #fce782, #fdf0b4, #fefae6, white) no-repeat;
	}

	.custom {
		background: -webkit-linear-gradient(bottom, #cc00ff, #e066ff, #f0b3ff, #fae5ff, white) no-repeat;
	}

	.special {
		background: -webkit-linear-gradient(bottom, #cc0000, #ff3333, #ff9999, #ffe5e5, white) no-repeat;
	}

	a {
		color: #42b983;
	}
</style>
